<!-- 电子签章校验配置 -->
<template>
  <el-container>
    <!-- <el-header height="36px" class="eleSignVerConfig">
      <header-title :title="$route.meta.title" />
    </el-header> -->
    <el-main class="mainDetails">
      <div>
        <SearchPanel title="查询条件">
          <div ref="queryFormBox" class="search-flex-box">
            <MyForm ref="formRef" v-model="queryParams" :form-option="formOption" :select-list="dicLists">
              <template #orgIds>
                <div @click="activeUnit">
                  <el-input v-model="customCheck" class="construct" :readonly="true" placeholder="请选择">
                    <i slot="suffix" class="el-icon-more" />
                  </el-input>
                </div>
              </template>
            </MyForm>
            <div class="searchBtn">
              <el-button type="primary" class="pms-button-primary" @click="doSearch">查询</el-button>
              <!-- <el-button size="mini" class="pms-button" @click="resetSearch">重置</el-button> -->
            </div>
          </div>
        </SearchPanel>
        <SearchList title="查询结果" style="margin-top: 16px">
          <template #header-btn>
            <BtnConfig ref="btnConfigRef" :btn-configs="btnOption" @propClick="btnClick" />
          </template>
          <template #body>
            <MyTable
              id="id"
              ref="myTableRef"
              :table-data="tableData"
              :columns="colOption"
              :col-option-enum="dicLists"
            />
            <pagination
              v-if="pageParam.total > 10"
              :total="pageParam.total"
              :page.sync="pageParam.pageNum"
              :limit.sync="pageParam.pageSize"
              @pagination="doSearch"
            />
          </template>
        </SearchList>
        <!-- 选择建设单位 -->
        <el-dialog
          v-dialogDrag
          title="选择建设单位"
          width="30%"
          :append-to-body="true"
          :modal-append-to-body="true"
          :modal="true"
          :close-on-click-modal="false"
          :lock-scroll="true"
          class="pms-dialog"
          :visible.sync="dialogUnit"
        >
          <div class="dialogForm">
            <ChooseUnit ref="chooseUnitRef" v-model="queryParams.orgIds" />
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" class="pms-button-primary" size="small" @click="verifyUnit">确 定</el-button>
            <el-button type="primary" class="pms-button-primary" @click="dialogUnit = false">取 消</el-button>
          </div>
        </el-dialog>
        <el-dialog
          v-if="dialogVerConfig"
          v-dialogDrag
          :title="dialogTitle"
          :append-to-body="true"
          :modal-append-to-body="true"
          :modal="true"
          :close-on-click-modal="false"
          :lock-scroll="true"
          width="50%"
          class="pms-dialog"
          :visible.sync="dialogVerConfig"
        >
          <div class="dialogForm">
            <AddVerifyUnit ref="addVerifyUnitRef" :edit-check-id="editCheckId" :item-info="itemInfo" :dic-lists="dicLists" :is-edit="isEdit" />
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" class="pms-button-primary" size="small" @click="verifyConfigUnit">确 定</el-button>
            <el-button type="primary" class="pms-button-primary" @click="dialogVerConfig = false">取 消</el-button>
          </div>
        </el-dialog>
      </div>
    </el-main>
  </el-container>
</template>

<script>
// import HeaderTitle from '@/components/basic/HeaderTitle'
import MyForm from '@/components/basic/myForm'
import SearchPanel from '@/components/basic/SearchPanel'
import SearchList from '@/components/basic/SearchList'
import MyTable from '@/components/basic/myTable'
import SysConst from '@/common/const'
import ChooseUnit from './chooseUnit.vue'
import BtnConfig from '@/components/basic/btnConfig.vue'
import AddVerifyUnit from './addVerifyUnit.vue'
import { getDropdownData } from '@/api/common' // 字典接口
import { getListApi, addApi, updateApi, delApi } from '@/api/attachManagement/electronicSign/eleSignVerConfig'
import { queryOrgApi } from '@/api/attachManagement/electronicSign/eleSignVerConfig'
// import { getPrjNodeNameApi } from '@/api/attachmentInfo'
import {
    formOption,
    colOption,
    btnOption
} from './index' // addFormOption

const isOpen = [
        {
            dictName: '是',
            dictId: '1'
        },
        {
            dictName: '否',
            dictId: '0'
        }
    ]

export default {
    name: 'EleSignVerConfig',
    components: {
        // HeaderTitle,
        MyForm,
        SearchPanel,
        SearchList,
        MyTable,
        ChooseUnit,
        AddVerifyUnit,
        BtnConfig
    },
    data() {
        return {
            formOption, // 查询条件配置
            colOption, // 列表表头
            btnOption, // 列表操作按钮
            tableData: [], // 列表数据
            dialogTitle: '新增', // 弹框标题
            queryParams: {}, // 查询条件数据
            customCheck: '', // 查询条件建设单位选择后显示
            dicLists: {}, // 字典数据集合
            dialogUnit: false, // 建设单位弹框
            dialogVerConfig: false, // 新增/编辑弹框
            isEdit: false, // 是否编辑
            editCheckId: null, // 编辑时所选中数据的id
            itemInfo: {}, // 列表数据项信息
            // 分页信息
            pageParam: {
                pageSize: SysConst.PAGESIZE, // 每页显示val条
                pageNum: SysConst.CURRENT_PAGE, // 当前页
                total: SysConst.TOTAL // 总数
            }
        }
    },
    created() {
        this.getDictData()
        // this.getPrjNodeName()
        this.queryOrg()
        this.doSearch()
    },
    methods: {
        // 查看数据
        doSearch(item) {
            const params = {
                pageNum: item?.page || SysConst.CURRENT_PAGE,
                pageSize: item?.limit || SysConst.PAGESIZE,
                ...this.queryParams
            }
            getListApi(params).then(res => {
              if (+res.code !== 200) {
                  return Promise.reject(res)
        }
                console.log(res)
                this.tableData = res.data.records
                this.pageParam.total = res.data?.total || 0
                this.pageParam.pageSize = item?.limit || SysConst.PAGESIZE
                this.pageParam.pageNum = item?.page || SysConst.CURRENT_PAGE
            })
        },
        // 选择建设单位
        activeUnit() {
            this.dialogUnit = true
        },
        // 点击操作按钮
        btnClick(fun, row) {
            this[fun](row)
        },
        // 新增
        add(row) {
            console.log(row, '新增--row')
            this.dialogVerConfig = true
            this.isEdit = false
            this.editCheckId = null
            this.itemInfo = {}
            // addFormOption.itemData.forEach(item => {
            //     if (item.prop === 'orgId') {
            //         item.value = []
            //     } else {
            //         item.value = ''
            //     }
            // })
        },
        // 编辑
        edit(row) {
            console.log(row, '编辑--row')
            // const data = row[0]
            this.itemInfo = row[0]
            this.dialogTitle = '编辑'
            this.dialogVerConfig = true
            this.isEdit = true
            this.editCheckId = row[0].id
            // addFormOption.itemData.forEach(item => {
            //     const defaultVal = data[item.prop]
            //     if (item.prop === 'orgId') {
            //         item.value = data.orgId.toString().split().map(item => +item)
            //     } else {
            //         item.value = defaultVal
            //     }
            // })
        },
        // 删除
        delete(row) {
            console.log(row, '删除--row')
            const idList = row.map(item => item.id)
            this.$confirm('确认删除, 是否继续?', '删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                cancelButtonClass: 'pms-zr-button',
                confirmButtonClass: 'pms-zr-button-primary',
                type: 'warning'
            }).then(() => {
                this.del({ ids: idList.join() })
            }).catch(() => {
                console.log('取消删除了')
            })
        },
        // 调用删除接口
        del(params) {
            delApi(params).then(res => {
              if (+res.code !== 200) {
                  return Promise.reject(res)
        }
                this.doSearch()
                this.$refs.myTableRef.clearSelection()
                this.$message.success('删除成功!')
                this.doSearch({
                    page: this.pageParam.pageNum,
                    limit: this.pageParam.pageSize
                })
                console.log(res, '删除res')
            })
        },
        // 确定单位
        verifyUnit() {
            const { checkedKeys, checkedNodes } = this.$refs.chooseUnitRef
            this.$set(this.queryParams, 'orgIds', checkedKeys)
            const list = checkedNodes.map((item) => item.orgName)
            this.customCheck = list.join().replaceAll(',', '、')
            this.dialogUnit = false
            console.log(checkedKeys, checkedNodes, '确定单位')
        },
        // 表单新增或编辑确认
        verifyConfigUnit() {
            const flag = this.$refs.addVerifyUnitRef.formValidate()
            console.log(flag, '校验')
            if (!flag) {
              return this.$message.info('信息不完整，请完整填写')
            }
            const { fromValue } = this.$refs.addVerifyUnitRef
            console.log(fromValue, 'fromValue.orgId')
            const paramsAdd = { ...fromValue, checkState: +fromValue.checkState, orgIds: fromValue.orgId }
            const paramsEdit = { ...fromValue, checkState: +fromValue.checkState, orgId: fromValue.orgId[0], id: this.editCheckId }
            delete paramsAdd.orgId
            delete paramsEdit.customCheck
            this.isEdit ? this.editPort(paramsEdit) : this.addPort(paramsAdd)
        },
        // 调用新增接口
        addPort(params) {
            addApi(params).then(res => {
              if (+res.code !== 200) {
                  return Promise.reject(res)
        }
                console.log(res, '新增')
                this.$message.success('新增成功')
                this.dialogVerConfig = false
                this.doSearch()
            })
        },
        // 调用编辑接口
        editPort(params) {
            updateApi(params).then(res => {
              if (+res.code !== 200) {
                  return Promise.reject(res)
        }
                console.log(res, '编辑')
                this.$message.success('修改成功')
                this.dialogVerConfig = false
                this.doSearch()
            })
        },
        // 重置
        // resetSearch() {
        //     this.$refs.formRef.reset()
        //     this.doSearch({
        //         page: 1,
        //         limit: 10
        //     })
        // },
        // 获取下拉框数据
        async getDictData() {
            const arr = ['IS_NEWBUSINESS', 'PROJ_TYPE', 'BUILD_MODES', 'SIGN_CHEKC_NODE']
            const promises = arr.map(item => getDropdownData(item))
            const results = await Promise.all(promises)
            arr.forEach((item, i) => {
                this.$set(this.dicLists, item, results[i].data ?? [])
            })
            this.$set(this.dicLists, 'IS_OPEN', isOpen)
        },
        // 查询建设单位
        async queryOrg() {
            const res = await queryOrgApi()
            this.$set(this.dicLists, 'BUILD_UNIT', res.data)
        }
        // 获取项目节点字典
        // async getPrjNodeName() {
        //     const res = await getPrjNodeNameApi({ stageList: '' })
        //     this.$set(this.dicLists, 'PRO_NODE', res.data)
        // }
    }
}
</script>

<style lang="scss" scoped>
.eleSignVerConfig {
    width: 100%;
}
.search-flex-box {
    // display: flex;
    // justify-content: space-between;
    height: auto;
}
.searchBtn {
    width: 100px;
    display: flex;
    margin-left: auto;
    margin-top: 4px;
    flex-direction: column;
    .el-button + .el-button {
        margin-left: 0;
        margin-top: 12px;
    }
}

.mainDetails {
    padding: 0 25px;
}

.el-icon-more {
    cursor: pointer;
    color: #000;
}

.dialogForm {
    // margin: 10px 10px 20px;
    // max-height: 400px;
    // overflow-y: auto;
}
::v-deep .el-dialog__body {
    max-height: 400px;
    overflow-y: auto;
}
// 滚动条样式
::v-deep .el-dialog__body::-webkit-scrollbar {
  // 滚动条整体样式
  width: 6px; //高宽分别对应横竖滚动条的尺寸
  height: 10px;
}
::v-deep .el-dialog__body::-webkit-scrollbar-thumb {
  // 滚动条里面小方块
  border-radius: 10px;
  // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #f2f3f5;
}

.el-button--primary {
    color: #fff;
}
</style>
